/***
 * @退货申请单 内容区头部信息渲染
 */
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Checkbox, Typography } from 'antd';
import ApplyDetailsModal from './ApplyDetailsModal';
import styles from './index.module.less'

const { Paragraph } = Typography;

export default ({ data, isSelect, handleSelect }) => {
  const [visible, setVisible] = useState(false);

  const { id, refundOrderSn, orderSn, applyTime, finishTime, refundState, rejectReason } = data;
	const navigate = useNavigate();
  //跳转订单处理全部页面
  const handleJumpfunc = (orderSn) => {
    navigate('/views/order/list',{ state: {orderSn }});
  }

  const applyDetailsModalProps = {
    visible,
    handleCancel(){
      setVisible(false);
    }
  }

  return (
    <div className={styles.headerWrapper}>
      <Checkbox checked={isSelect} onChange={e => handleSelect(e, data)} style={{ marginRight: '16px' }} /> 
      <span style={{ marginRight: '40px' }}>退货单号：
        <Paragraph copyable={{text:refundOrderSn}} style={{ marginBottom: 0, display: 'inline-block' }}>
          <a onClick={() => setVisible(data) }>{refundOrderSn || '-'}</a>
        </Paragraph>
      </span>
      <span style={{ marginRight: '40px' }}>系统订单号：
        <Paragraph copyable={{text:orderSn}} style={{ marginBottom: 0, display: 'inline-block' }}>
          <a onClick={() => handleJumpfunc(orderSn) }>{orderSn || '-'}</a>
        </Paragraph>
      </span>
      <span style={{ marginRight: '40px' }}>申请时间：{applyTime}</span>
      {finishTime && <span style={{ marginRight: '40px' }}>完成时间：{finishTime}</span>}
      {refundState == 1  && <span>拒绝原因：{rejectReason}</span>}
      {visible && <ApplyDetailsModal {...applyDetailsModalProps} />}
    </div>
  )
}